/* eslint-disable */
import React, { Fragment, memo } from 'react';
import { useFormatMessage } from '@choerodon/master';
import PropTypes from 'prop-types';
import StatusDot from '../status-dot';
import { Tag,Tooltip } from 'choerodon-ui';
import './index.less';

const EnvironmentItem = memo(({
  name, connect, synchronize, active, clusterName, failed, isTitle, formatMessage,
}) => {
  const format = useFormatMessage('c7ncd.resource');
  return (
    <>
      <StatusDot
        active={active}
        connect={connect}
        failed={failed}
        synchronize={synchronize}
        size={isTitle ? 'normal' : 'small'}
      />
      {isTitle ?<span className="c7ncd-env-title">{name}</span>:  <span className="c7ncd-env-title-default"><Tooltip placement="top" title= {name}>{name}</Tooltip></span>}
      {clusterName ? (
        <span className="c7ncd-env-cluster">
          (
          {format({ id: 'ConnecttoCluster' })}
          :
          {clusterName}
          )
        </span>
      ) : null}
      {connect===false &&<span className='c7ncd-env-Agent'><Tooltip placement="top" title= {format({ id: 'Agent.tooltip' })}>
          <Tag color="orange"> {format({ id: 'Agent' })}</Tag></Tooltip></span> }
    </>
  );
});

EnvironmentItem.propTypes = {
  name: PropTypes.any.isRequired,
  active: PropTypes.bool,
  connect: PropTypes.bool,
  synchronize: PropTypes.bool,
  failed: PropTypes.bool,
  isTitle: PropTypes.bool,
};

EnvironmentItem.defaultProps = {
  active: true,
  failed: false,
  isTitle: false,
  synchronize: true,
};

export default EnvironmentItem;
